<template>
  <view class="container">
    <view class="header">
      <view class="lable1">
        <view>{{ fundInfo.regCode }}</view>
        <span class="span">|</span>
        <view>{{ fundInfo.strategyLevel1 }}-{{ fundInfo.strategyLevel2 }}</view>
      </view>
      <view class="fundName">{{ fundInfo.fundName }}</view>
    </view>
    <uni-card :is-shadow="true">
      <view class="navInfo">
        <view>
          <view
            :class="
              fundInfo.nav > 0
                ? 'redValue'
                : fundInfo.nav < 0
                ? 'greenValue'
                : 'normalValue'
            "
          >
            {{ fundInfo.nav }}
          </view>
          <view class="line2 weak-title">
            净值 {{ fundInfo.statisticDate.substr(-5) }}
          </view>
        </view>
        <view>
          <view
            :class="
              fundInfo.yearIncomRate > 0
                ? 'redValue'
                : fundInfo.yearIncomRate < 0
                ? 'greenValue'
                : 'normalValue'
            "
          >
            {{ fundInfo.yearIncomRate }}
          </view>
          <view class="line2 weak-title"> 今年以来收益率 </view>
        </view>
        <view>
          <view
            :class="
              fundInfo.totalIncomRate > 0
                ? 'redValue'
                : fundInfo.totalIncomRate < 0
                ? 'greenValue'
                : 'normalValue'
            "
          >
            {{ fundInfo.totalIncomRate }}
          </view>
          <view class="line2 weak-title"> 成立以来收益率 </view>
        </view>
      </view>
    </uni-card>
    <!-- <uni-card class="chartCard" title="业绩走势"> -->
    <view class="charts-card">
      <view class="title">业绩走势</view>
      <view class="charts-box">
        <qiun-data-charts
          class="achievementcharts"
          type="area"
          :opts="opts"
          :chartData="historyAchievements"
        />
      </view>
    </view>
    <uni-card>
      <view class="history">
        <view class="uni-padding-wrap">
          <uni-segmented-control
            class="segmented"
            style-type="text"
            active-color="#007aff"
            :current="current"
            :values="items"
            @clickItem="onClickItem"
          />
        </view>
        <view>
          <swiper
            class="mySwiper"
            :current="current"
            :duration="300"
            @change="onTabChange"
          >
            <swiper-item class="swiper-item">
              <view class="history-nav">
                <view class="colHeader weak-title row">
                  <view class="col1 colHeader">时间区间</view>
                  <view class="col2 colHeader">单位净值</view>
                  <view class="col3 colHeader">累计净值</view>
                  <view class="col4 colHeader">复权累计净值</view>
                </view>
                <view class="history-nav-records">
                  <view v-for="(item, index) in historyNavs" :key="index">
                    <view class="row">
                      <view class="col1">{{ item.date }}</view>
                      <view class="col2">{{ item.nav }}</view>
                      <view class="col3">{{ item.totalNav }}</view>
                      <view class="col4">{{ item.adjustedTotalNav }}</view>
                    </view>
                  </view>
                </view>
              </view>
            </swiper-item>
            <swiper-item class="swiper-item">
              <text class="content-text">选项卡2的内容</text>
            </swiper-item>
          </swiper>
        </view>
      </view>
    </uni-card>
    <uni-card title="基金详情" :is-shadow="true">
      <div class="grid-container">
        <div class="grid-item row-header">基金全称</div>
        <div class="grid-item row-value">{{ fundInfo.fundFullName }}</div>
        <div class="grid-item row-header">基金编号</div>
        <div class="grid-item row-value">{{ fundInfo.regCode }}</div>
        <div class="grid-item row-header">成立日期</div>
        <div class="grid-item row-value">{{ fundInfo.foundationDate }}</div>
        <div class="grid-item row-header">资产规模</div>
        <div class="grid-item row-value">{{ fundInfo.totalAsset }}</div>
        <div class="grid-item row-header">基金管理人</div>
        <div class="grid-item row-value">{{ fundInfo.fundManagerNomina }}</div>
      </div>
    </uni-card>
  </view>
</template>

<script>
import {
  getFundInfo,
  getHistoryNavs,
  getHistoryAchievements,
} from "../../apis/api";

export default {
  data() {
    return {
      items: ["历史净值", "历史业绩"],
      current: 0,
      pageSize: 5,
      fundId: "",
      fundInfo: {},
      historyNavs: [],
      historyAchievements: {},
      opts: {
        color: ["#FC8452"],
        padding: [15, 10, 0, 15],
        enableScroll: false,
        dataPointShape: false,
        // tooltipShow: true,
        enableMarkLine: true,
        dataLabel: false,
        fontSize: 10,
        legend: {
          show: false,
        },

        xAxis: {
          disableGrid: true,
          labelCount: 3,
          // axisLine: false,
          // calibration: true,
          fontSize: 10,
        },
        yAxis: {
          // calibration: true,
          gridType: "dash",
          dashLength: 4,
          splitNumber: 4,
          // data: [{ unit: "%" }],
        },
        extra: {
          line: {
            type: "straight",
            width: 2,
            activeType: "hollow",
          },
        },
      },
    };
  },
  onLoad(event) {
    // this.fundId = event.fundId;
    this.fundId = "1";
    this.getData();
  },
  methods: {
    onClickItem(e) {
      if (this.current !== e.currentIndex) {
        this.current = e.currentIndex;
      }
    },
    onTabChange(e) {
      let current = e.target.current || e.detail.current;

      if (this.current !== current) {
        this.current = current;
      }
    },
    getData() {
      this.getBaseInfo();
      this.getHistoryNavs();
      this.getHistoryAchievements();
    },
    getBaseInfo() {
      getFundInfo(this.fundId)
        .then((res) => {
          this.fundInfo = res.data.data;
          console.log(this.fundInfo);
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    getHistoryNavs() {
      var param = {
        pageSize: this.pageSize,
        pageNum: 1,
      };

      getHistoryNavs(param)
        .then((res) => {
          var newItems = [];
          res.data.data.records.forEach((e) => {
            newItems.push(e);
          });
          this.historyNavs = newItems;
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    getHistoryAchievements() {
      var param = {
        fundId: this.fundId,
        dataRange: "1y",
      };

      getHistoryAchievements(param)
        .then((res) => {
          var xValues = [];
          var yValues1 = [];
          res.data.data.records.forEach((e) => {
            xValues.push(e.date);
            yValues1.push(e.value);
          });

          let maxTemp = Math.max(...yValues1);
          let minTemp = Math.min(...yValues1);

          let interval = 10.0;
          let pointCount = 5;
          if (maxTemp * minTemp < 0) {
            var firstValue = Math.min(maxTemp, Math.abs(minTemp));
            var secValue = Math.max(maxTemp, Math.abs(minTemp));
            var maxIsFirst = maxTemp <= Math.abs(minTemp);
            let i = 0;
            while (true) {
              i++;
              interval = 10 * i;
              let firstCount = Math.ceil(firstValue / interval);
              let secCount = pointCount - 1 - firstCount;
              if (secCount * interval >= secValue) {
                if (maxIsFirst) {
                  maxTemp = firstCount * interval;
                  minTemp = -1 * secCount * interval;
                } else {
                  maxTemp = secCount * interval;
                  minTemp = -1 * firstCount * interval;
                }
                break;
              }
            }
          } else {
            maxTemp = Math.ceil(maxTemp / interval) * interval;
            minTemp = Math.floor(minTemp / interval) * interval;
          }

          let ss = [
            {
              tofix: 0,
              unit: "%",
              min: minTemp,
              max: maxTemp,
              axisLine: false,
            },
          ];
          this.opts = { ...this.opts, yAxis: { ...this.opts.yAxis, data: ss } };

          let chartData = {
            categories: xValues,
            series: [
              {
                name: "achievements",
                data: yValues1,
              },
            ],
          };
          this.historyAchievements = JSON.parse(JSON.stringify(chartData));
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
  },
};
</script>

<style lang="scss">
@import "fundInfo.scss";
</style>
